<template>
  <div class="dashboard-container">
    <div class="top">
      <!-- 销售额 -->
    <el-card class="card-box one">
      <div class="header">
        <span class="title">{{ $t('route.sales') }}</span>
        <i class="el-icon-warning"></i>
      </div>
      <div class="conter">
        <div class="price">¥ 126,560</div>
        <span>周同比12%
          <i class="el-icon-caret-top"></i>
        </span>
        <span>日环比11%
          <i class="el-icon-caret-bottom"></i>
        </span>
      </div>
      <div class="footer">
        <span>日均销售额 ¥12,423</span>
      </div>
    </el-card>
    <!-- 访问量 -->
    <el-card class="card-box">
      <div class="header">
        <span class="title">{{ $t('route.sales') }}</span>
        <i class="el-icon-warning"></i>
      </div>
          <div id="attendanceData" style="margin: 0 auto; width: 288px;height: 220px; box-sizing:border-box; line-height: 289px;">     
         </div>
      <div class="footer">
        <span>日均销售额 ¥12,423</span>
      </div>
    </el-card>
    <!-- 支付笔数 -->
    <el-card class="card-box">
      <div class="header">
        <span class="title">{{ $t('route.sales') }}</span>
        <i class="el-icon-warning"></i>
      </div>
      <div id="main2" style="margin: 0 auto; width: 288px;height: 220px; box-sizing:border-box; line-height: 289px;"></div>
      <div class="footer">
        <span>日均销售额 ¥12,423</span>
      </div>
    </el-card>
    <!-- 运营活动效果 -->
    <el-card class="card-box">
      <div class="header">
        <span class="title">{{ $t('route.sales') }}</span>
        <i class="el-icon-warning"></i>
      </div>
      <div id="main3" style="margin: 0 auto; width: 288px;height: 220px; box-sizing:border-box; line-height: 289px;"></div>
      <div class="footer">
        <span>日均销售额 ¥12,423</span>
      </div>
    </el-card>
    </div>
     <el-card class="tab-cut" style="position: relative;">
     <span style="position: absolute;top: 20px; right: 20px; color: rgb(153, 153, 153);"> 前端与java学科试题走势图 </span>   
       <el-tabs v-model="activeName" @tab-click="handleClick" >
         <el-tab-pane label="用户管理" name="first">
          <div id="main4" style=" width: 1500px; height: 400px; box-sizing:border-box; line-height: 289px;">     
         </div>
         </el-tab-pane>
         <el-tab-pane label="配置管理" name="second">
          <div id="main5" style="width: 1500px;height: 400px; box-sizing:border-box; line-height: 289px;">     
         </div>
         </el-tab-pane>
       </el-tabs>
       <div class="databox">
         <div>学科试题数量排名</div>
         <ul>
          <li>
            <div class="circular">1</div>
            <div style="width: 80%;">前端</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular">2</div>
            <div style="width: 80%;">java</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular">3</div>
            <div style="width: 80%;">大数据</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular shallow">4</div>
            <div style="width: 80%;">c++</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular shallow">5</div>
            <div style="width: 80%;">UI</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular shallow">6</div>
            <div style="width: 80%;">php</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular shallow">7</div>
            <div style="width: 80%;">python</div>
            <div>5,234</div>
          </li>
          <li>
            <div class="circular shallow">8</div>
            <div style="width: 80%;">测试</div>
            <div>5,234</div>
          </li>
         </ul>
       </div>
     </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data () {
    return {
      activeName: 'first'  
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted(){
    	// 在通过mounted调用即可
		this.echartsInit()
    this.echartspie()
    this.echartsbar()
    this.echartsline()
    this.echartsline2()
	},
  methods: {
	  //初始化echarts
	  echartsInit() {
	  	//柱形图
	  	//因为初始化echarts 的时候，需要指定的容器 id='main'
      this.$nextTick(()=>{
        this.$echarts.init(document.getElementById("attendanceData")).setOption({
        radar: [
          {
            indicator: [
              { text: '逻辑思维', max: 100 },
              { text: '项目相关', max: 100 },
              { text: '理论知识', max: 100 },
              { text: '高阶技术', max: 100 },
              { text: '基础知识', max: 100 }
            ],
            radius: 70,
            center: ['50%', '60%']
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 70, 80],
                name: 'A Software'
              }
            ]
          }
        ]
      })
      })
    },
    echartspie() {
      this.$nextTick(()=>{
        this.$echarts.init(document.getElementById("main2")).setOption({
          color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff"
          ],
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [10, 60],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5
              },
              data: [
                { value: 90, name: '前端' },
                { value: 68, name: 'java' },
                { value: 45, name: 'python' },
                { value: 30, name: 'c++' },
                { value: 13, name: 'UI' }
              ]
            }
          ]
        })
      })
    },
    echartsbar() {
      this.$nextTick(()=>{
        this.$echarts.init(document.getElementById("main3")).setOption({
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            
            {
              name: 'Email',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Union Ads',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ads',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190, 330, 410]
            }
          ]
        })
      })
    },
    echartsline() {
      this.$nextTick(()=>{
        this.$echarts.init(document.getElementById("main4")).setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [1820, 1333, 2221, 3333, 2212, 1330, 1234],
              type: 'line',
              smooth: true
            }
          ]
        })
      })
    },
    echartsline2() {
      this.$nextTick(()=>{
        this.$echarts.init(document.getElementById("main5")).setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 2352,2222,3896, 3001, 4934, 160, 1330, 1320],
              type: 'line',
              smooth: true
            }
          ]
        })
      })
    },
    // tab
    handleClick(tab, event) {
      console.log(tab)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-container{
  .top{
    display: flex;
    justify-content:space-around;
  .card-box{
    width: 100%;
    height: 300px;
    margin-left: 15px;
    .header{
      display: flex;
      justify-content: space-between;
      color: #999;
    }
    .conter{
      margin-top: 80px;
      margin-bottom: 10px;
      div {
        margin-bottom: 80px;
        margin-left: 10px;
        font-size: 25px;
      }
    }
    .footer{
      border-top: 1px solid #eadbdb;
      padding-top: 5px;
    }
  }
  .one{
    margin-left: 0;
  }
  }
  .tab-cut{
    margin-top: 20px;
    position: relative;
    .databox{
      width: 528px;
      height: 300px;
      position: absolute;
      top: 128px;
      right: 20px;
      ul{
        padding: 0;
      li{
        padding-top: 10px;
        display: flex;
        text-align: left;
        .circular{
          width: 20px;
          height: 20px;
          background-color: #314659;
          color: #fff;
          text-align: center;
          font-size: 12px;
          line-height: 20px;
          font-weight: 600;
          border-radius: 50%;
        }
        .shallow{
          background-color: #F5F5F5;
          color: #314659;
        }
      }
    }
    }
    
  }
}
</style>
